<!--教师信息管理组件-->
<template>
  <div>
    <!-- 标签页 -->
    <el-tabs type="border-card" stretch class="info-tab" tab-position="top">
      <!-- 用户基本资料的管理 -->
      <el-tab-pane>
        <span slot="label" class="tab-title"
        ><i class="el-icon-user"></i>基本资料设置</span
        >
        <TeacherBaseInfoModify></TeacherBaseInfoModify>
      </el-tab-pane>
      <!-- 头衔管理 -->
      <el-tab-pane>
        <span slot="label" class="tab-title"
        ><i class="el-icon-setting"></i>头衔设置</span
        >
        <labelSetting></labelSetting>
      </el-tab-pane>
      <!-- 职务管理 -->
      <el-tab-pane>
        <span slot="label" class="tab-title"
        ><i class="el-icon-s-flag"></i>职务设置</span
        >
        <appointmentSetting></appointmentSetting>
      </el-tab-pane>
      <!-- 密码管理 -->
      <el-tab-pane>
        <span slot="label" class="tab-title"
        ><i class="el-icon-lock"></i>修改密码</span
        >
        <passwordSetting></passwordSetting>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TeacherBaseInfoModify from "./TeacherBaseInfoModify.vue";
import labelSetting from "./labelSetting.vue";
import appointmentSetting from "./appointmentSetting.vue";
import passwordSetting from "./passwordSetting.vue";

export default {
  components: {
    TeacherBaseInfoModify,
    labelSetting,
    appointmentSetting,
    passwordSetting,
  },
  //权限判断，通过组件路由导航进行
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 在回调函数中可以访问组件实例的 this
      if (vm.$store.state.token) {
        next();
      } else {
        const parts = vm.$route.path.split('/');
        const path = '/'+parts[1]+'/qdrkdz';
        next(path);

      }
    });
  },
  //在离开当前路由时，将token置空
  beforeRouteLeave(to, from, next) {
    this.$store.commit("removeToken");
    next();
  },
};
</script>

<style scoped>
.info-tab {
  width: 98%;
  min-height: 600px;
}

.tab-title {
  font-size: 20px;
}
</style>
